<template>
	<view class="cotent">
		<view class="top flex-cb">
			<view class="date" :class="kssj?'':'hui'" @click="onDisplay">{{kssj?kssj:'开始日期'}}</view>
			<view class="gd">-</view>
			<view class="date" :class="jssj?'':'hui'" @click="onDisplay">{{jssj?jssj:'结束日期'}}</view>
			<view class="label" @click="lxClick">{{lxName?lxName:'全部类型'}} ></view>
		</view>
		<view class="num">累计收入(元)：<text class="c4167C1">{{list && list.length > 0?list[0].totalMoney: 0}}</text></view>
		<view class="flex-cb card" v-for="(item, index) in list" :key="index">
			<view class="cont">
				<view>{{item.orderTypeInfo }}</view>
				<view>{{item.orderInfo}}</view>
				<view>{{item.createTime}}</view>
			</view>
			<view class="right">+{{item.realPrice}}</view>
		</view>
		<u-loadmore v-if="!is && list.length >= 10" status="nomore" line />
		<view class="no-list" v-if="!list || list.length == 0">
			<image src="@/static/images/default_empty.png"></image>
			<view>暂无数据</view>
		</view>
		<u-picker :show="showLx" :columns="columns" keyName="name" @confirm="ConfirmLx"
			@cancel="showLx = false"></u-picker>
		<u-calendar :defaultDate="defaultDateMultiple" monthNum="4" :minDate="minDate" :maxDate="maxDate" allowSameDay
			:show="showDate" confirmDisabledText="请选择起始日期和结束日期" mode="range" @confirm="confirmBtn"
			@close="closeBtn"></u-calendar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: '',
				kssj: '',
				jssj: '',
				showDate: false,
				minDate: this.formatDate(new Date().getTime() - 60 * 60 * 24 * 1000 * 90),
				maxDate: '',
				defaultDateMultiple: [this.formatDate(new Date().getTime() - 60 * 60 * 24 * 1000 * 6), this.$app
					.firstQueryTime().slice(
						0, 10)
				],
				columns: [],
				lxName: '',
				lxId: '',
				showLx: false,
				page: 0, //页码
				is: true, //控制是否还能切换下一页
				list: [],
			};
		},
		onLoad(options) {
			this.orderTypeList()
			this.getList()
			console.log(this.minDate, new Date(new Date().toLocaleDateString()).getTime(), this.maxDate)
		},
		methods: {
			calculation(s) {
				return s < 10 ? '0' + s : s
			},
			formatDate(date) {
				var date = new Date(date)
				const year = date.getFullYear() + '-'
				const month = this.calculation(date.getMonth() + 1) + '-'
				const day = this.calculation(date.getDate())
				return year + month + day
			},
			confirmBtn(e) {
				this.kssj = e[0]
				this.jssj = e[e.length - 1]
				this.showDate = false
				this.date = [e[0], e[e.length - 1]]
				this.is = true
				this.page = 0
				this.list = []
				this.getList()
			},
			onDisplay() {
				this.showDate = true
			},
			closeBtn() {
				this.showDate = false
			},
			lxClick() {
				this.showLx = true
			},
			cancleLx() {
				this.showLx = false
			},
			ConfirmLx(e) {
				this.lxId = e.value[0].id;
				this.lxName = e.value[0].name;
				this.showLx = false;
				this.is = true;
				this.page = 0;
				this.list = [];
				this.getList();
			},
			orderTypeList() {
				this.$app.ajax({
					data: {
						param: {
							type: "ORDER_TYPE_WX_LIST_QUERY"
						}
					},
					api: this.$api.orderTypeList()
				}).then(res => {
					if (res.errorCode != '000000') return
					let arr =[{id:'',name: '全部类型'},...res.recordList]
					this.columns = [arr]
				})
			},
			// 列表
			getList() {
				if (!this.is) return
				this.page = this.page + 1
				this.$app.ajax({
					data: {
						pagination: {
							page: this.page,
							rows: 10
						},
						param: {
							userId: uni.getStorageSync('userId'),
							startDate: this.kssj,
							type: this.lxId,
							endDate: this.jssj,
						}
					},
					api: this.$api.incomeDetails()
				}).then(res => {
					if (res.errorCode != '000000') return
					if (res.recordList.length < 10 || !res.recordList) {
						this.is = false
					}
					let arr = res.recordList
					let arrs = []
					if (arr) {
						arrs = this.list.concat(arr)
					} else {
						arrs = []
					}
					this.list = arrs
				})
			},
			onReachBottom() {
				this.getList();
			},
		}
	};
</script>

<style>
	page {
		background: #f7f7f7;
	}
</style>
<style lang="scss" scoped>
	.top {
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		box-sizing: border-box;
		background-color: #fff;
		padding: 30rpx;
	}

	.top .label {
		line-height: 53rpx;
		height: 55rpx;
		background: #F7F7F7;
		text-align: center;
		width: 200rpx;
		border-radius: 28px;
		font-size: 26rpx;
		margin-left: 20rpx;
		border: 1px solid #EEEEEE;
	}

	.top .gd {
		color: #333333;
		font-size: 26rpx;
		margin: 0 20rpx;
	}

	.top .date {
		line-height: 53rpx;
		height: 55rpx;
		background: #F7F7F7;
		text-align: center;
		border-radius: 28px;
		font-size: 26rpx;
		flex: 1;
		border: 1px solid #EEEEEE;
	}

	.top .date.hui {
		color: #B2B2B2;
	}

	.card {
		box-sizing: border-box;
		background-color: #fff;
		margin: 30rpx auto 0;
		border-radius: 16rpx;
		padding: 30rpx;
	}

	.right {
		color: #DD5040;
		font-size: 28rpx;
		font-weight: bolder;
	}

	.cont {
		flex: 1;
		color: #666666;
		text-align: left;
		font-size: 24rpx;
		line-height: 1.5;
	}

	.cont view {
		margin-top: 10rpx;
	}

	.cont view:first-of-type {
		color: #222222;
		font-size: 28rpx;
		font-weight: bolder;
		margin-top: 0;
	}

	.ul {
		padding-bottom: 120rpx;
	}

	.num {
		font-weight: 400;
		color: #333333;
		margin-top: 30rpx;
		font-size: 28rpx;
		padding-left: 30rpx;
		line-height: 1.5;
	}
</style>